<template>
  <div class="divBox" style="background: rgb(240, 242, 245);height: calc(100vh - 120px);">
    <el-row :gutter="18"  class="panel-group">
        <el-col :span="6" class="content">
            <div class="card-panel">
                <div class="card-panel-description">
                    <div class="card-panel-text">
                        <span class="card-order">普通用户每日生成图片数</span>
                        <span class="card-date" v-if="!show1" @click="show1 = true">编辑</span>
                        <div v-if="show1">
                            <el-button size="mini" @click="show1= false">取消</el-button>
                            <el-button size="mini" type="primary" @click="submit">确定</el-button>
                        </div>
                    </div>
                    <div class="card-panel-date">
                          <el-input v-if="show1" v-model="faultData.day_free_counts" placeholder="请输入"></el-input>
                        <h3 v-else>{{ day_free_counts }}</h3>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="6" class="content">
            <div class="card-panel">
                <div class="card-panel-description">
                    <div class="card-panel-text">
                        <span class="card-order">普通用户总生成图片数</span>
                        <span class="card-date" v-if="!show2" @click="show2 = true">编辑</span>
                        <div v-if="show2">
                            <el-button size="mini" @click="show2= false">取消</el-button>
                            <el-button size="mini" type="primary" @click="submit">确定</el-button>
                        </div>
                    </div>
                    <div class="card-panel-date">
                          <el-input v-if="show2" v-model="faultData.all_free_counts" placeholder="请输入"></el-input>
                        <h3 v-else>{{ all_free_counts }}</h3>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="6" class="content">
            <div class="card-panel">
                <div class="card-panel-description">
                    <div class="card-panel-text">
                        <span class="card-order">会员每日生成图片数</span>
                        <span class="card-date" v-if="!show3" @click="show3 = true">编辑</span>
                        <div v-if="show3">
                            <el-button size="mini" @click="show3= false">取消</el-button>
                            <el-button size="mini" type="primary" @click="submit">确定</el-button>
                        </div>
                    </div>
                    <div class="card-panel-date">
                          <el-input v-if="show3" v-model="faultData.vip_day_free_counts" placeholder="请输入"></el-input>
                        <h3 v-else>{{ vip_day_free_counts }}</h3>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="6" class="content">
            <div class="card-panel">
                <div class="card-panel-description">
                    <div class="card-panel-text">
                        <span class="card-order">会员总生成图片数</span>
                        <span class="card-date" v-if="!show4" @click="show4 = true">编辑</span>
                        <div v-if="show4">
                            <el-button size="mini" @click="show4= false">取消</el-button>
                            <el-button size="mini" type="primary" @click="submit">确定</el-button>
                        </div>
                    </div>
                    <div class="card-panel-date">
                          <el-input v-if="show4" v-model="faultData.vip_all_free_counts" placeholder="请输入"></el-input>
                        <h3 v-else>{{ vip_all_free_counts }}</h3>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="6" class="content" style="margin-top: 20px;">
            <div class="card-panel">
                <div class="card-panel-description">
                    <div class="card-panel-text">
                        <span class="card-order">VIP月加速数</span>
                        <span class="card-date" v-if="!show5" @click="show5 = true">编辑</span>
                        <div v-if="show5">
                            <el-button size="mini" @click="show5= false">取消</el-button>
                            <el-button size="mini" type="primary" @click="submit">确定</el-button>
                        </div>
                    </div>
                    <div class="card-panel-date">
                          <el-input v-if="show5" v-model="faultData.day_vip_speed_counts" placeholder="请输入"></el-input>
                        <h3 v-else>{{ day_vip_speed_counts }}</h3>
                    </div>
                </div>
            </div>
        </el-col>

    </el-row>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | jufeiniu [蓝港AI-好用又快]
// +----------------------------------------------------------------------
// | Copyright (c) 2023 https://jufeiniu.com/ All rights reserved.
// +----------------------------------------------------------------------
// | Author: 巨说还行-乔欣弥弥-巨肥牛 <jufeiniu@163.com>
// +----------------------------------------------------------------------
// | Personal site: https://jufeiniu.com/
// +----------------------------------------------------------------------
import {
  getCreateImgsCount,setCreateImgsCount
} from '@/api/cms'

import { roterPre } from '@/settings'
export default {
  name: 'Article',
  data() {
    return {
      roterPre: roterPre,

      listLoading: true,
      all_free_counts:0,
      day_free_counts:0,
      day_vip_speed_counts:0,
      vip_day_free_counts:0,
      vip_all_free_counts:0,
      faultData:{},
      show1:false,
      show2:false,
      show5:false,

      show3:false,
      show4:false,

    }
  },
  mounted() {
    this.getList('')
  },
  methods: {
    // 列表
    getList(num) {

      getCreateImgsCount().then(res => {
        console.log(res)
        this.faultData= JSON.parse(JSON.stringify(res.data.data[0]))
        this.all_free_counts=res.data.data[0].all_free_counts
        this.day_free_counts=res.data.data[0].day_free_counts
        this.day_vip_speed_counts=res.data.data[0].day_vip_speed_counts
        this.vip_day_free_counts=res.data.data[0].vip_day_free_counts
        this.vip_all_free_counts=res.data.data[0].vip_all_free_counts

      }).catch(res => {

        this.listLoading = false
        this.$message.error(res.message)
      })
    },
    pageChange(page) {
      this.tableFrom.page = page
      this.getList('')
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getList('')
    },
    onEdit(id) {
      this.$modalForm(communityUpdateApi(id)).then(() => this.getList(''))
    },
    handleDelete(id, idx) {
      this.$modalSure('确定删除该内容').then(() => {
        communityDeleteApi(id).then(({ message }) => {
          this.$message.success(message)
          this.getList('')
        }).catch(({ message }) => {
          this.$message.error(message)
        })
      })
    },
    onOff(id){
      this.$modalForm(communityOffApi(id)).then(() => this.getList(''))
    },
    onchangeIsShow(row) {
      communityStatusApi(row.community_id, row.is_show).then(({ message }) => {
        this.$message.success(message)
      }).catch(({ message }) => {
        this.$message.error(message)
      })
    },
    submit(){
      setCreateImgsCount(this.faultData).then(res=>{
        this.$message.success('操作成功')
          this.getCreateImgsCount()
      })
    },
  }
}
</script>

<style scoped lang="scss">
  .content {
    &-is {
        opacity: 1%;
    }

    &-title {
        font-size: 14px;
        color: #000000;
        margin-bottom: 5px;
    }

    &-time {
        font-size: 12px;
        color: #8C8C8C;
        margin-bottom: 5px;
    }

    &-number {
        font-size: 30px;
    }
    .content-title{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
.panel-group-count{
  margin-top: 18px;
  .card-panel-item{
    float: left;
  }
  .card-panel-count{
    background-color: #ffffff;
    border-radius: 4px;
    // width: 90%;
    height: 104px;
    text-align: center;
    padding-top: 20px;
    span{
      display: block;
    }
    .iconfont{
      font-size: 27px;
    }
    .panel-text{
      font-size: 14px;
      color: #303133;
      margin-top: 15px;
    }
  }
}
.card-panel {
  cursor: pointer;
  font-size: 14px;
  position: relative;
  overflow: hidden;
  color: #8C8C8C;
  background: #fff;
  position: relative;
  border-radius: 12px;
  height: 178px;
}
.card-panel-description {
  padding: 0 20px;
  margin-top: 19px;
  .card-panel-text {
    line-height: 18px;
    margin-bottom: 12px;
    font-weight: normal;
    align-items: center;
    justify-content: space-between;
    display: flex;
    .card-order{
      color: #303133;
      font-size: 16px;
    }
    .card-date{
      border: 1px solid #33963d;
      border-radius: 3px;
      color: #33963d;
      background: #F4F7FF;
      text-align: center;
      line-height: 20px;
      width: 38px;
    }
  }
  .card-panel-num {
    font-size: 30px;
    color: #33963d;
    font-weight: bold;
  }
}
.card-panel-compared {
    margin: 15px 0;
}
.card-panel-date{
    border-top: 1px solid #EEEEEE;
    display: flex;
    align-items: center;
    margin-top: 46px;
    justify-content: space-between;
    padding: 13px 0;
  }
  h3{
    color: #000;
  }
</style>
